<template>
	<view class="notice-list flex--col" >
			<view class="notice-list-heading flex--row" @click.stop="folded = !folded" :aria-expanded="folded" role="button">
				<view class="notice-date text--main-dark">{{noticeDate.noticeDateStr}}</view>
				<image :aria-label="noticeLabel" src="@/static/xzhu/down.svg" class="icon" :class="{'active':folded}" ></image>
			</view>
			<view class="notice-list-items flex--col" :class="{'active':folded}">
				<NoticeItem v-for="notice in noticeDate.list" :key="notice.id" :notice="notice" @confirmNotice="confirmNotice"></NoticeItem>
			</view>
	</view>
</template>

<script>
	import NoticeItem from "./NoticeItem.vue"
	export default {
		components:{
			NoticeItem,
		},
		props:['noticeDate'],
		emits:['confirmNotice'],
		data(){
			return {
				folded:true
			}
		},
		computed:{
			noticeLabel(){
				if(!this.folded){
					return `展开${this.noticeDate.noticeDateStr}的通知`
				}
				return `折叠${this.noticeDate.noticeDateStr}的通知`
			}
		},
		methods:{
			confirmNotice(noticeId){
				this.$emit('confirmNotice',noticeId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 700;
		color:#333;
	}
	
	
	.notice-list{
		gap:16px;
		margin-bottom: 24px;
		&-heading{
			justify-content: space-between;
			flex:1;
			

			.icon{
				transition:transform 1s;
				transform:rotate(90deg);
			}
			.icon.active{
				transform:rotate(0deg);
			}
		}
		
		&-items{
			transition:all 3s;
			gap:12px;
			display:none;
			
			&.active{
				display:flex;
			}
		}
	}
</style>